<template>
  <div>
    <div class="rightWin1" v-if="visible">
      <span class="title">{{ label }}</span>
      <el-form class="userTask">
        <el-form-item label="任务标题">
          <el-input v-model="label"></el-input>
        </el-form-item>
        <el-form-item label="接收请求url地址">
          <el-input v-model="postUrl"></el-input>
        </el-form-item>
        <el-form-item label="操作url地址">
          <el-input v-model="opsUrl"></el-input>
        </el-form-item>
        <el-form-item label="是否会签">
          <el-select v-model="isMulti" placeholder="请选择">
            <el-option v-for="item in options" :key="item.key" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会签人/角色" v-if="isMulti == '1'">
          <el-input v-model="userLabel" @focus="openUserDialog"></el-input>
        </el-form-item>
        <el-tabs v-model="activeName" v-if="isMulti == '1'">
          <el-tab-pane label="同意策略" name="agree">
            <el-select v-model="approvedStrategy" placeholder="请选择">
              <el-option v-for="item in strategyOptions" :key="item.key" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-form-item label="请输入具体的人数：" v-if="approvedStrategy == '1'">
              <el-input v-model="approvedValue"></el-input>
            </el-form-item>
            <el-form-item label="请输入具体的百分比：" v-else-if="approvedStrategy == '2'">
              <el-input v-model="approvedValue"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="拒绝策略" name="reject">
            <el-select v-model="rejectStrategy" placeholder="请选择">
              <el-option v-for="item in strategyOptions" :key="item.key" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-form-item label="请输入具体的人数：" v-if="rejectStrategy == '1'">
              <el-input v-model="rejectValue"></el-input>
            </el-form-item>
            <el-form-item label="请输入具体的百分比：" v-else-if="rejectStrategy == '2'">
              <el-input v-model="rejectValue"></el-input>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
        <el-form-item label="指定人员" v-if="isMulti == '0'">
          <el-select v-model="isGroup" placeholder="请选择">
            <el-option v-for="item in groupOptions" :key="item.key" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="候选组" v-if="isGroup == '0' && isMulti == '0'">
          <el-input v-model="candidateGroupsLabel" placeholder="输入候选组" @focus="openUserDialog"></el-input>
        </el-form-item>
        <el-form-item label="指派人" v-if="isGroup == '1' && isMulti == '0'">
          <el-input v-model="assigneeLabel" placeholder="输入指派人" @focus="openUserAssigneeDialog"></el-input>
        </el-form-item>
      </el-form>
      <footer class="footer">
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button type="primary" @click="visible = false">关闭</el-button>
      </footer>
    </div>
    <el-dialog title="选择人员" :visible.sync="open" v-if="open" width="1000px" append-to-body>
      <select-user :isMulti="isMulti" :valueType="userType" :valueList="valueList" @callBack="callback"></select-user>
    </el-dialog>
    <el-dialog title="选择人员" :visible.sync="userOpen" v-if="userOpen" width="1000px" append-to-body>
      <select-user-assignee :valueList="userList" :valueType="userAssgineeType"
        @userCallBack="userCallback"></select-user-assignee>
    </el-dialog>
  </div>
</template>

<script>
import selectUser from './selectUser.vue'
import { mapGetters, mapState } from "vuex";
import selectUserAssignee from './selectUserAssignee.vue'
import store from "@/store";
export default {
  name: 'UserTask',
  components: { selectUser, selectUserAssignee },
  computed: {
    // postUrl: {
    //   get() {
    //     return store.state.bpmn.postUrl
    //   },
    //   set(val) {
    //     console.log("set val",val)
    //     store.commit('SET_POSTURL', val);
    //   }
    // }
  },
  data() {
    return {
      options: [
        {
          key: '0',
          value: "1",
          label: '会签'
        },
        {
          key: '1',
          value: "0",
          label: '不是会签'
        }],
      groupOptions: [
        {
          key: '0',
          value: "0",
          label: '指定候选组'
        },
        {
          key: '1',
          value: "1",
          label: '给任务指定人'
        }],
      strategyOptions: [
        {
          key: '0',
          value: "1",
          label: '按人数'
        },
        {
          key: '1',
          value: "2",
          label: '按百分比'
        }],
      postUrl: '',
      opsUrl: '',
      approvedStrategy: '1',
      rejectStrategy: '1',
      approvedValue: '0',
      rejectValue: '0',
      isMulti: '0',
      activeName: "agree",
      users: '',
      userLabel: '',
      visible: false,
      bool: true,
      node: {},
      label: '',
      candidateGroups: '',
      candidateGroupsLabel: '',
      assignee: '',
      open: false,
      userOpen: false,
      radio: "1",
      deptValue: '',
      userType: '',
      userAssgineeType: '',
      valueList: '',
      userList: '',
      assigneeLabel: '',
      isGroup: '0',
      multiUserType: '' // 会签用户类型标识
    }
  },
  mounted() {
  },
  methods: {
    openUserDialog() {
      this.open = true
      console.log('oepnUserDialog')
      if (this.isMulti == "1") {
        this.userType = this.multiUserType
        this.valueList = this.users.split(",")
      } else if (this.isMulti == "0") {
        this.userType = this.userType
        this.valueList = this.candidateGroups.split(",")
      }
      console.log('userTask: valueList', this.valueList)
    },
    openUserAssigneeDialog() {
      this.userOpen = true
      this.userList = this.assignee.split(",")
    },
    init(item) {
      this.node = item
      this.label = item.item.data.label
      this.candidateGroups = item.item.data.candidateGroups
      this.candidateGroupsLabel = item.item.data.candidateGroupsLabel
      this.assignee = item.item.data.assignee
      this.assigneeLabel = item.item.data.assigneeLabel
      this.isMulti = item.item.data.isMulti
      this.approvedStrategy = item.item.data.approvedStrategy
      this.rejectStrategy = item.item.data.rejectStrategy
      this.approvedValue = item.item.data.approvedValue
      this.rejectValue = item.item.data.rejectValue
      this.users = item.item.data.users
      this.userLabel = item.item.data.userLabel
      this.userType = item.item.data.userType
      this.multiUserType = item.item.data.multiUserType
      this.isGroup = item.item.data.isGroup
      this.userAssgineeType = item.item.data.userAssgineeType
      this.opsUrl = item.item.data.opsUrl
      this.postUrl = item.item.data.postUrl
    },
    submit() {
      var node = this.$parent.getNodeById(this.node.item.id)
      // 如果选择的是指定候选组，则清空指派人相关信息
      if (this.isGroup == '0') {
        this.assignee = ""
        this.assigneeLabel = ""
        this.userAssgineeType = ""
      } else if (this.isGroup == "1") {
        // 如果选择的是指定指派人，则清空候选组相关信息
        this.candidateGroups = ""
        this.candidateGroupsLabel = ""
        this.userType = ""
      }
      // 如果是会签，则把不是会签中的选择指派人和候选组相关信息都清空
      if (this.isMulti == "1") {
        this.assignee = ""
        this.assigneeLabel = ""
        this.candidateGroups = ""
        this.candidateGroupsLabel = ""
        this.isGroup = ""
        this.userAssgineeType = ""
        this.userType = ""
      } else if (this.isMulti == "0") {
        this.multiUserType = ""
        this.users = ""
        this.userLabel = ""
      }
      // 设置node名字
      node.label = this.label
      // 把表单中设置的数据，设置保存到x6的node节点的data属性中
      node.setData(Object.assign({}, this.node.item.data, {
        candidateGroups: this.candidateGroups,
        candidateGroupsLabel: this.candidateGroupsLabel,
        // valueType = this.type,
        assignee: this.assignee,
        assigneeLabel: this.assigneeLabel,
        isMulti: this.isMulti,
        approvedStrategy: this.approvedStrategy,
        rejectStrategy: this.rejectStrategy,
        approvedValue: this.approvedValue,
        rejectValue: this.rejectValue,
        users: this.users,
        userType: this.userType,
        multiUserType: this.multiUserType,
        userLabel: this.userLabel,
        label: this.label,
        userAssgineeType: this.userAssgineeType,
        isGroup: this.isGroup,
        opsUrl: this.opsUrl,
        postUrl: this.postUrl
      }))
      // 1按角色，2按用户
      this.visible = false
      // store.commit('SET_POSTURL', this.postUrl);
    },
    callback(isMulti, type, values, labels) {
      console.log("userTask: callback", isMulti, type, values, labels)
      if (isMulti == "1") {
        this.users = values;
        this.userLabel = labels
        this.multiUserType = type
      } else if (isMulti == "0") {
        this.candidateGroups = values
        this.candidateGroupsLabel = labels
        this.userType = type
      }
      this.open = false;
    },
    userCallback(type, values, labels) {
      console.log("userTask: userCallback values", values, 'labels ', labels)
      this.userOpen = false;
      this.assignee = values
      this.assigneeLabel = labels
      this.userAssgineeType = type
    }
  }
}
</script>
<style scoped>
section {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rightWin1 {
  overflow-y: scroll;
}

.rightWin1 {
  background-color: white;
  position: absolute;
  top: 65px;
  right: 0;
  bottom: 0;
  padding: 0 12px;
  width: 300px;
}

.title {
  font-size: 20px;
  margin-top: 10px;
  margin-left: 10px;
}

.footer {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 35px;
}

.userTask {
  width: 80%;
  margin-left: 15px;
}

.demo-form-inline {
  margin-top: 25px;
  margin-left: 10px;
}
</style>
